<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('招标需求列表')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <style scoped>
        /*.select-list {*/
        /*    width: 100%;*/
        /*}*/
        .row2 {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px; /* 可选的行间距 */
        }

        /*ul {*/
        /*    width: 100%;*/
        /*}*/

        /*li {*/
        /*    flex: 1 0 30%; !* 占据容器宽度的30%，不收缩也不放大 *!*/
        /*    margin-right: 10px; !* 字段之间的间距 *!*/
        /*}*/

        .container {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start; /* 或者使用 space-between 或 space-around */
        }
        .box-my {
            flex: 0 0 auto; /* 不允许伸缩 */
            height: 25px;
            width: 20%; /* 假设容器宽度为100%，则每个div宽度为20% */
            margin: 0; /* 移除默认的margin */
            padding: 0; /* 移除默认的padding */
            box-sizing: border-box; /* 确保宽度包括padding和border */
            /* 添加背景色或其他样式以区分每个div */
            background-color: #add8e6;
            border: 1px solid #ddd;
            text-align: center;
            line-height: 25px;
        }
        .box-my:hover {
            background-color: #3c8dbc; /* 鼠标悬停时改变背景色 */
        }
    </style>
</head>
<body class="gray-bg" onload="setBackgroundColor()">
    <div class="ui-layout-west">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa fa-sitemap"></i> 招标需求
                </div>
                <div class="box-tools pull-right">
<!--                    <a type="button" class="btn btn-box-tool" href="javascript:void(0)" onclick="dept()" title="管理部门"><i class="fa fa-edit"></i></a>-->
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div>

    <div class="ui-layout-center">
         <div class="container-div">
            <div class="row">
                <div class="container">
                    <div id="allCount" class="box-my" onclick="handleClick('0')">全部 1</div>
                    <div id="weibaoCount" class="box-my" onclick="handleClick('1')">待报价 2</div>
                    <div id="yibaoCount" class="box-my" onclick="handleClick('2')">已报价 3</div>
                    <div id="weizhongCount" class="box-my" onclick="handleClick('4')">未中标 4</div>
                    <div id="yizhongCount" class="box-my" onclick="handleClick('3')">已中标 5</div>
                </div>
                <div class="col-sm-12 search-collapse">
                    <form id="formId">
                        <input type="hidden" id="yaprentid" name="yaprentid">
                        <input type="hidden" id="id" name="id">
                        <div class="select-list">
                            <div class="row2">
                            <ul>
                                <li >
                                    <label>单号：</label>
                                    <input type="text" name="ynum0"/>
                                </li >
                                <li >
                                    <label>材料编码：</label>
                                    <input type="text" name="yitm0"/>
                                </li>
    <!--                            <li >-->
    <!--                                <label>供应商编码：</label>-->
    <!--                                <input type="text" name="ybpsnum0"/>-->
    <!--                            </li>-->
                                <li >
                                    <label>材料名称：</label>
                                    <input type="text" name="itmdes1"/>
                                </li>
                                <li >
                                    <label>规格型号：</label>
                                    <input type="text" name="yggxx"/>
                                </li>
                            </ul>
                            </div>
                            <div class="row2">
                            <ul>

                                <li >
                                    <label>材质牌号：</label>
                                    <input type="text" name="yczph"/>
                                </li>
                                <li class="select-time">
                                    <label>发布日期：</label>
                                    <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginYdat0]"/>
                                    <span>-</span>
                                    <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endYdat0]"/>
                                </li>
                                <li class="select-time" >
                                    <label>截至日期：</label>
                                    <input type="text" class="time-input" id="startTime2" placeholder="开始时间" name="params[beginYdatend0]"/>
                                    <span>-</span>
                                    <input type="text" class="time-input" id="endTime2" placeholder="结束时间" name="params[endYdatend0]"/>
                                </li>
                                <li style="display: none">
                                    <select id ="ycondit" name="ycondit" th:with="type=${@dict.getType('ytrq_ycodit')}">
                                        <option value="">全部</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                    </select>
                                </li>
                            </ul>
                            </div>
                            <div class="row2">
                            <ul>
                                <li >
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="search2()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="reset2()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                            </div>
    <!--                        <div class="row2">-->
    <!--                        <ul>-->
    <!--                            -->
    <!--                        </ul>-->
    <!--                        </div>-->
                        </div>
                    </form>
                </div>

                <div class="btn-group-sm" id="toolbar" role="group" >
                    <a style="display: none" class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:ytendereqe:add">
                        <i class="fa fa-plus" ></i> 添加
                    </a>
                    <a style="display: none" class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:ytendereqe:edit" >
                        <i class="fa fa-edit"></i> 修改
                    </a>
                    <a style="display: none" class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:ytendereqe:remove">
                        <i class="fa fa-remove"></i> 删除
                    </a>
                    <a class="btn btn-info" onclick="$.table.importExcel()" shiro:hasPermission="system:ytendereqe:import">
                        <i class="fa fa-upload"></i> 导入
                    </a>
    <!--                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:ytendereqe:export">-->
    <!--                    <i class="fa fa-download"></i> 导出1-->
    <!--                </a>-->
                    <a class="btn btn-warning" onclick="exportSelected()" shiro:hasPermission="system:ytendereqe:export">
                        <i class="fa fa-download"></i> 导出
                    </a>
                </div>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: layout-latest-js" />
    <th:block th:include="include :: ztree-js" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('system:ytendereqe:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:ytendereqe:remove')}]];
        var ysel0Datas = [[${@dict.getType('ytrq_sf')}]];
        var prefix = ctx + "system/ytendereqe";
        var bjFlag='';
        var butName='报价';
        var countlUrl=prefix + "/count";
        var downFlg='';
        $(function() {
            var panehHidden = false;
            if ($(this).width() < 769) {
                panehHidden = true;
            }
            $('body').layout({ initClosed: panehHidden, west__size: 185, resizeWithWindow: false });
            // 回到顶部绑定
            if ($.fn.toTop !== undefined) {
                var opt = {
                    win:$('.ui-layout-center'),
                    doc:$('.ui-layout-center')
                };
                $('#scroll-up').toTop(opt);
            }
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                importUrl: prefix + "/importData",
                importTemplateUrl: prefix + "/importTemplate",
                exportDataType: 'selected', // 导出选择数据
                clickToSelect: true,
                rememberSelected: false,
                modalName: "招标需求",

                columns: [
                    {
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '编号'
                },
                {
                    field: 'ydat0',
                    title: '发布日期'
                },
                {
                    field: 'ydatend0',
                    title: '结束日期'
                },
                {
                    field: 'yitm0',
                    title: '材料编码'
                },
                {
                    field: 'itmdes1',
                    title: '材料名称'
                },
                {
                    field: 'yggxx',
                    title: '规格型号'
                },
                {
                    field: 'yczph',
                    title: '材质牌号'
                },
                {
                    field: 'yjsbz',
                    title: '技术标准'
                },
                {
                    field: 'yqty',
                    title: '需求数量'
                },
                {
                    field: 'stu',
                    title: '招标单位'
                },
                {
                    field: 'ybpsnum0',
                    title: '供应商编码'
                },
                {
                    field: 'bpsnam',
                    title: '供应商名称'
                },
                {
                    field: 'yrank',
                    title: '价格排名'
                },
                {
                    field: 'ypri0',
                    title: '最终报价'
                },
                {
                    field: 'yzamt',
                    title: '总金额'
                },
                {
                    field: 'yfjjsyq',
                    title: '附加技术要求'
                },
                    {
                        field: 'yndcc',
                        title: '拟定尺寸'
                    },
                    {
                        field: 'yghcc',
                        title: '供货尺寸'
                    },
                    {
                        field: 'yhszl',
                        title: '换算重量'
                    },
                    {
                        field: 'ybeizd',
                        title: '备注'
                    },
                // {
                //     field: 'ysel0',
                //     title: '是否中标',
                //     formatter: function(value, row, index) {
                //        return $.table.selectDictLabel(ysel0Datas, value);
                //     }
                // },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        bjFlag='btn-primary ';
                        butName='报价';
                        downFlg='';

                        // 获取当前日期
                        var currentDate = new Date();
                        // 格式化日期为"YYYY-MM-DD"
                        var formattedDate = currentDate.getFullYear() + '-' +
                            ('0' + (currentDate.getMonth() + 1)).slice(-2) + '-' +
                            ('0' + currentDate.getDate()).slice(-2);

                        if (row.ypri0!=0){
                            bjFlag='btn-warning ';
                            butName='更新'
                        }
                        if (row.ystat0!=2 || row.ypri20>0 || row.ydatend0<formattedDate){
                            bjFlag+='hidden '
                        }
                        if(!row.yfilename){
                            downFlg+='hidden ';
                        }

                        var actions = [];
                        actions.push('<a class="btn  btn-xs ' + bjFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id+ '\')"><i class="fa"></i>'+butName+'</a> ');
                        actions.push('<a class="btn  ' + downFlg + '" href="javascript:void(0)" onclick="downloadFile(\'' + row.ynum0 + '\')"><i class="fa"></i>下载</a>');
                        // actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
            initHead(0);
            queryDeptTree();
        });
        //初始化表头数据
        function initHead(number) {
            // 使用fetch API发起GET请求
            fetch(countlUrl, {
                method: 'POST', // 指定请求方法为POST
                body: "", // 设置请求体为表单数据
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded' // 设置请求头，如果是JSON数据，则为'application/json'
                }
            }).then(response => {
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error('网络响应不是ok');
                }
                // 返回JSON数据
                return response.json();
            }).then(data => {
                    // 获取<div>元素
                    var allCountElement = document.getElementById('allCount');
                    var weizhongCountElement = document.getElementById('weizhongCount');
                    var weibaoCountElement = document.getElementById('weibaoCount');
                    var yibaoCountElement = document.getElementById('yibaoCount');
                    var yizhongCountElement = document.getElementById('yizhongCount');
                    // 将参数值设置为<div>元素的内容
                    allCountElement.textContent = "全部("+data.allCount+")";
                    weizhongCountElement.textContent = "未中标("+data.weizhongCount+")";
                    weibaoCountElement.textContent = "未报价("+data.weibaoCount+")";
                    yibaoCountElement.textContent = "已报价("+data.yibaoCount+")";
                    yizhongCountElement.textContent = "已中标("+data.yizhongCount+")";
                    if(number!=1){
                        document.getElementById('allCount').style.backgroundColor = "#3c8dbc";
                        document.getElementById('weibaoCount').style.backgroundColor = "#add8e6";
                        document.getElementById('yizhongCount').style.backgroundColor = "#add8e6";
                        document.getElementById('yibaoCount').style.backgroundColor = "#add8e6";
                        document.getElementById('weizhongCount').style.backgroundColor = "#add8e6";
                    }
            }).catch(error => {
                    // 在这里处理错误
                    console.error('在获取数据时发生错误:', error);
                });
        };
        function setSelectValue(selectId, optionValue) {
            // 获取select元素
            var selectElement = document.getElementById(selectId);
            // 遍历select的所有option
            if(optionValue=='0'){
                optionValue='';
            }
            for (var i = 0; i < selectElement.options.length; i++) {
                // 如果找到匹配的option值，则选中它
                console.log("selectElement:",selectElement.options[i].value+" "+optionValue)
                if (selectElement.options[i].value === optionValue) {
                    selectElement.options[i].selected = true;
                    break;
                }
            }
        };
        function search2() {
            initHead(1);
            $.table.search();
        };
        function reset2() {
            initHead(0);
            $.form.reset();
        };
        function handleClick(number) {
            initHead(1);
            setSelectValue('ycondit', number);
            $.table.search();
            setBackgroundColor(number);
        };
        // 当页面加载完成时执行的函数
        function setBackgroundColor(number) {
            if(number=="1"){
                var divElement = document.getElementById('weibaoCount');
                divElement.style.backgroundColor = "#3c8dbc";

                document.getElementById('yibaoCount').style.backgroundColor = "#add8e6";
                document.getElementById('yizhongCount').style.backgroundColor = "#add8e6";
                document.getElementById('weizhongCount').style.backgroundColor = "#add8e6";
                document.getElementById('allCount').style.backgroundColor = "#add8e6";
            }else if(number=="2"){
                var divElement = document.getElementById('yibaoCount');
                divElement.style.backgroundColor = "#3c8dbc";

                document.getElementById('weibaoCount').style.backgroundColor = "#add8e6";
                document.getElementById('yizhongCount').style.backgroundColor = "#add8e6";
                document.getElementById('weizhongCount').style.backgroundColor = "#add8e6";
                document.getElementById('allCount').style.backgroundColor = "#add8e6";
            }else if(number=="3"){
                var divElement = document.getElementById('yizhongCount');
                divElement.style.backgroundColor = "#3c8dbc";

                document.getElementById('weibaoCount').style.backgroundColor = "#add8e6";
                document.getElementById('weizhongCount').style.backgroundColor = "#add8e6";
                document.getElementById('yibaoCount').style.backgroundColor = "#add8e6";
                document.getElementById('allCount').style.backgroundColor = "#add8e6";
            }else if(number=="4"){
                var divElement = document.getElementById('weizhongCount');
                divElement.style.backgroundColor = "#3c8dbc";

                document.getElementById('weibaoCount').style.backgroundColor = "#add8e6";
                document.getElementById('yizhongCount').style.backgroundColor = "#add8e6";
                document.getElementById('yibaoCount').style.backgroundColor = "#add8e6";
                document.getElementById('allCount').style.backgroundColor = "#add8e6";
            }else{
                var divElement = document.getElementById('allCount');
                divElement.style.backgroundColor = "#3c8dbc";

                document.getElementById('weibaoCount').style.backgroundColor = "#add8e6";
                document.getElementById('yizhongCount').style.backgroundColor = "#add8e6";
                document.getElementById('yibaoCount').style.backgroundColor = "#add8e6";
                document.getElementById('weizhongCount').style.backgroundColor = "#add8e6";
            }
        };

        // 导出数据
        function exportSelected() {
            var ids = $.table.selectColumns("id");
            var dataParam = $("#export-form").serializeArray();
            var tipMsg = "确定导出所有数据吗？";
            if ($.common.isNotEmpty(ids)) {
                tipMsg = "确定导出勾选" + ids.length + "条数据吗？";
                dataParam.push({"name": "ids", "value": ids});
                $.modal.confirm(tipMsg, function() {
                    $.modal.loading("正在导出数据，请稍候...");
                    $.post(prefix + "/exportData", dataParam, function(result) {
                        if (result.code == web_status.SUCCESS) {
                            window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
                        } else {
                            $.modal.alertError(result.msg);
                        }
                        $.modal.closeLoading();
                    });
                });
            } else
            {
                $.modal.alertError("没有选择任何行");
            };

        };

        //下载文件
        function downloadFile(value){
            window.location.href = prefix+ "/download?resource=" + value;
        };

        function queryDeptTree()
        {
            var url = ctx + "system/ytendereqe/ytrqTreeData";
            var options = {
                url: url,
                expandLevel: 2,
                onClick : zOnClick
            };
            $.tree.init(options);

            function zOnClick(event, treeId, treeNode) {
                $("#id").val('');
                $("#yaprentid").val('');
                if(treeNode.pId){
                    $("#id").val(treeNode.id);
                    console.log("明细ID"+treeNode.id);
                }else{
                    $("#yaprentid").val(treeNode.id);
                }
                $.table.search();
            }
        };

        $('#btnExpand').click(function() {
            $._tree.expandAll(true);
            $(this).hide();
            $('#btnCollapse').show();
        });

        $('#btnCollapse').click(function() {
            $._tree.expandAll(false);
            $(this).hide();
            $('#btnExpand').show();
        });

        $('#btnRefresh').click(function() {
            queryDeptTree();
        });

        /* 用户管理-部门 */
        function dept() {
            var url = ctx + "system/dept";
            $.modal.openTab("部门管理", url);
        }

    </script>

</body>
</html>

<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <div class="mt10 pt5">
<!--                <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的数据-->
                &nbsp;	<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
            </div>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>
</html>
